<template>
  <div>
    <setHeader :title="headerTitle" settext="保存" @done="gotobtn"></setHeader>
    <div class="content" style="margin-bottom: 0;">
      <!-- 信息 -->
      <div class="main-navigater main-nav-menu" style="margin-top: 0;">
        
         <!-- <div class="main_menu" style="border-bottom: 0.12rem solid #f5f5f5;text-align: left;">
              <label for="">个人头像： <input type="hidden" v-model="CardLogo" style="font-size: 0.26rem; color: #666;"></label>
          </div> -->
          <div style="border-bottom: 0.12rem solid #f5f5f5;">
            <camera headerimg="个人头像：" v-on:avatar="avatar" :avatar="userInfo.userhead"></camera>
          </div>

          <a href="javascript:void(0)" class="main_menu">
              <label for="">用户名称： <input type="text" v-model="form_data.username" style="font-size: 0.26rem; color: #666;" placeholder="暂无展示用户名称请填写"></label>
          </a>
           <!-- <div class="main_menu">
              <label for="">展示公司： <input type="text" v-model="userInfo.company_name" style="font-size: 0.26rem; color: #666;" @input="marchCompany($event)"></label>
              <label for="">展示公司： 
                <select name="" id="trade" v-model="trade">
                  <option value="">请选择公司</option>
                  <option :value="item.id" v-for="(item,it) in companylist" :key="it">{{item.name}}</option>
                </select>
              </label>
          </div>  -->
          <!-- 我的代码 -->
          <div class="main_menu" style="text-align: left;">
              <label for="">展示公司： 
                <!-- <input type="text" v-model="industry" style="font-size: 0.26rem; color: #666;"> -->

                <select id="company_trade"  @change="GetCompanyInfo()" v-model="form_data.c_id" v-if="companylist!=''">
                  <option v-for="(item,it) in companylist" :value="item.id" :key="it" v-if="item.id == userInfo.company">{{item.companyname}}</option>
                  <option :value="item.id" v-else>{{ item.companyname }}</option>
                  <!-- <option :value="item.id" v-for="(item,it) in companylist" :key="it">{{item.companyname}}</option> -->
                </select>

                <select id="company_trade"  v-else>
                  <option :value="0">暂无加入企业</option>
                </select>

              </label>
          </div>
          <!-- 我的代码 -->
          <div class="main_menu">
              <label for="">工作职位： <input type="text" v-model="form_data.position" style="font-size: 0.26rem; color: #666;" placeholder="暂无展示工作职位请填写"></label>
          </div>
          <div class="main_menu" style="text-align: left;" @click="industryClick">
              <label for="">所在行业： 
                <span v-if="form_data.industry" style="font-size: 0.26rem; color: #666;line-height:0.3rem;">
                  {{form_data.industry}}
                </span>
                <span v-else>
                  暂无展示行业信息请填写
                </span>
                <!-- <input type="text" v-model="form_data.industry" style="font-size: 0.26rem; color: #666;" placeholder="暂无展示行业信息请填写" @mousedown="showPicker"> -->
              </label>
          </div>
          <a href="javascript:void(0)" class="main_menu">
              <label for="">电话号码： <input type="text" maxlength="11"  v-model="form_data.mobile" style="font-size: 0.26rem; color: #666;" placeholder="暂无展示电话号码请填写"></label>
          </a>
          <div class="main_menu">
              <label for="">电子邮箱： <input type="text" maxlength="20" v-model="form_data.usermail" style="font-size: 0.26rem; color: #666;" placeholder="暂无展示电子邮件请填写"></label>
          </div>
          <div class="main_menu">
              <label for="">展示地址： <input type="text" maxlength="20" v-model="form_data.address" style="font-size: 0.26rem; color: #666;" placeholder="暂无展示地址请填写"></label>
          </div>
      </div>
        <!-- <el-upload
            class="avatar-uploader"
            :action="importFileUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="CardLogo" :src="imgUrl + CardLogo" class="avatar" style="width: 1.2rem;height: 1.2rem;border-radius: 50%;position: relative;">
            <div class="plusBGI"><img src="../common/images/u3095.png" alt=""></div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <!-- <div class="create_person" @click="submitCard">生成名片</div> -->
        <div class="btn_big_white" @click="userCenter()" style="margin-top: 0.9rem;">
          <button>我的个人首页</button>
        </div>
        <!-- 遍历企业 -->
        <!-- <div class="match">
            <ul @click="selectCompany($event)">
                <li v-for="(item,cL) in companyList" :key="cL" :c_id="item.id">{{item.name}}</li>
            </ul>
        </div> -->
      <!-- 真实姓名 -->
      <!-- <ViewModal :modalState.sync="viewState">
          <nupdate @done="closePageModal" v-show="nupdate_show" @Updatedone="UpdateName"></nupdate>
          <uupdate @done="closePageModal" v-show="uupdate_show" @UpdateUserNamedone="UpdateUserName"></uupdate>
          <cupdate @done="closePageModal" v-show="cupdate_show" @UpdateCompanydone="UpdateCompany"></cupdate>
          <eupdate @done="closePageModal" v-show="eupdate_show" @UpdateEmaildone="UpdateEmail"></eupdate>
      </ViewModal> -->
 
      <!-- <div class="suspension-info suspension-uinfo">
          <div class="suspension-info-top">
              <img src="../common/images/userAvatar.png" ref="userImg" :style= "{ height: userImgHeight + 'px' }">
              <div class="suspension-info-top-center">
                <h2>姓名</h2>
                <p style="color:#c6c6c6;font-size:12px;" >信息介绍</p>
                
                <div class="clear"></div>
              </div>   
          </div>
            <div class="suspension-info-bottom">
                <ul>
                  <li>72</br>收藏</li>
                  <li>120</br>卡卷</li>
                  <div class="clear"></div>
                </ul>
            </div>       
      </div>  -->
      <!--个人信息-->
      <!-- <mt-cell title="个人头像"  is-link  to="/uavatar">
        <img slot="icon" :src="this.userInfo.userhead" width="30" height="30" style="float:right">
      </mt-cell> -->
      <!-- <div>
          <mt-cell title="名字" v-model="this.userInfo.name" is-link to="/nupdate"></mt-cell>
          <mt-cell title="关联公司" v-model="this.userInfo.company"  is-link to="/cupdate"></mt-cell>
          <mt-cell title="会员名"  v-model="this.userInfo.username" is-link to="/uupdate"></mt-cell>
          <mt-cell title="电话号码" v-model="this.userInfo.mobile" is-link to="/mupdate"></mt-cell> 
          <mt-cell title="邮箱" v-model="this.userInfo.email" is-link to="/eupdate"></mt-cell>
          <div v-on:click="outlogin"><mt-cell title="退出登陆" is-link ></mt-cell></div>
      </div> -->
    </div>

    <!-- 行业 -->
    <IndustryLinkage v-show="industryShow" @categoryname="showIndustry" @categoryId="showIndustryId" @done="closeAdd" :industryshow="true"></IndustryLinkage>
    
 </div>
</template>

<script>
  import setHeader from '../public/setHeader.vue';
  import camera from '../public/camera-bar';
  import IndustryLinkage from '@/components/industry_linkage';
  // import ViewModal from "@/components/View";
  // import nupdate from "@/public/nupdate"
  // import uupdate from "@/public/uupdate"
  // import cupdate from "@/public/cupdate"
  // import eupdate from "@/public/eupdate"
  import axios from 'axios';
  import qs from 'qs'
  import { MessageBox, Actionsheet, Button, Indicator } from 'mint-ui';

  export default {
    data() {
      return {
        headerTitle:'编辑个人信息',
        viewState: false,
        industryShow: false,
        logining: true,
        form_data:{
            username:'',   //用户名称
            avatar:'',     //头像
            c_id:'0',      //企业id
            position:'',   //职位
            industry:'',   //行业
            access_token: '',  //token 
            mobile:'',     //展示手机
            usermail:'',   //展示邮件
            address:'',    //展示地址
        },
        companylist:'', //企业列表
        companyinfo:{
          admin_job:'',
          trade:'',
        },
        // checked: true,
        // userImgHeight:'',
        // companyName: '',
        industryList: [],
        trade: '',
        c_hyId: '',
        // username: '',
        // mobile: '',
        // usermail: '',
        // position: '',
        // logImgPath: '',
        // imgUrl: this.$path,
        // CardLogo: '',
        // importFileUrl:this.$path+'/index.php/api/uploadLogo',

        //组件隐藏
        // nupdate_show: false,
        // uupdate_show: false,
        // cupdate_show: false,
        // eupdate_show: false,
        update_name:{
            name:'',
            access_token:'',
        },
        access_token: '',
        companyList: [],
        companyDetails: {},
        userInfo: '',
        companyname:'',
       

      }
    },
    components: {
      Button,
      setHeader,
      camera,
      IndustryLinkage
      // ViewModal,
      // nupdate,
      // uupdate,
      // cupdate,
      // eupdate
    },
    created() {
        let that = this;
        that.access_token = window.localStorage.getItem('access_token');
        that.GetUserCompanyList();

        that.userInfo = window.localStorage.getItem('userInfo');    //用户信息
        that.userInfo = JSON.parse(that.userInfo);    
        that.form_data.username = that.userInfo.username == '' ? '暂无填写用户名称' : that.userInfo.username;   //用户名称
        that.form_data.c_id = that.userInfo.company;    //企业id
        that.form_data.avatar   = that.userInfo.userhead; //用户头像
        that.form_data.mobile   = that.userInfo.showmobile; //用户手机号码展示
        that.form_data.usermail = that.userInfo.showusermail; //用户邮箱展示
        that.form_data.address  = that.userInfo.showaddress; //用户地址展示

        that.getIndustryList();

        
        // that.GetCompanyInfo();
        that.form_data.position = that.userInfo.position == '' ? that.companyinfo.admin_job : that.userInfo.position;  //职位
        that.form_data.industry = that.userInfo.industry == '' ? that.companyinfo.trade     : that.userInfo.industry;  //行业
        that.form_data.access_token = that.access_token;


        console.log(that.form_data);
        //that.companyinfo.admin_job = that.userInfo.admin_job != null ? that.userInfo.admin_job : '暂无填写职业'; //职位
        //that.companyinfo.trade = that.userInfo.trade != null ? that.userInfo.trade : '暂无填写行业';   //行业

        
        // company_trade
        console.log(that.userInfo);

    },
    mounted() {
      let that = this;
      
    
   
    },
    methods: {
        //点击打开行业
        industryClick() {
          this.industryShow = !this.industryShow;
        },
        //行业
        showIndustry(data) {
          this.form_data.industry = data;
          this.industryShow = false;
        },
        
        showIndustryId(data) {
          this.c_hyId = data;
          console.log('行业Id',this.c_hyId);
          //调用接口检索
          // this.checkCircle();
          this.industryShow = false;
        },
        // 关闭选择地区
        closeAdd() {
          this.industryShow = false;
        },

        default:function(){ 

        },
        /**
         * 返回个人首页
         */
        userCenter: function(){
          if(this.$system != 'ios'){
            this.$router.push({path:'/userCenter/userHomePage?uid='+this.userInfo.uid});
          }else{
            window.location.href = '/userCenter/userHomePage?uid=' +this.userInfo.uid;
          }  
        },
        //用户头像
        avatar:function(data)
        { 
          
          this.form_data.avatar = data;
        },
        /*
           获取用户对应的企业列表
         */
        GetUserCompanyList:function(){
          var that = this;
         this.$post(this.$path + '/index.php/api/users/UserCompanyList',{access_token:this.access_token}).then((response)=>{
              if(response.code == 200){ 

                  that.companylist =  response.data;
                }
              })

        },
        /*
          获取企业信息  职位 行业
         */
        GetCompanyInfo:function(){
          var that = this;
            this.$fetch(this.$path + '/index.php/api/users/GetCompanyInfo/'+this.form_data.c_id).then((response)=>{
                that.form_data.position = response.data.architeName != null ?  response.data.architeName : ''; //职位
                that.form_data.industry  = response.data.trade !=null ? response.data.trade: '';   //行业
            })
        },
        /**
         * 筛选选择哪个企业
         */
        // selectCompany: function(e){
        //     var that = this;
        //     var data = {
        //         access_token: this.access_token,
        //         id: e.target.attributes.c_id.value
        //     };
        //     this.$post(this.$path + '/index.php/api/companyDetails', data).then((response)=>{
        //         console.log(response);
        //           if(response.code == 200){
        //             that.companyDetails = response.data;
        //             that.userInfo.company_name = response.data.name;
        //             that.trade = response.data.trade;
        //             $('#trade')[0].disabled = true;
        //           }else{

        //           }
        //       })
        //       this.companyList = [];
        // },
        getIndustryList: function(){
          var that = this;
          var data = {
                access_token: this.access_token,
            };
          this.$post(this.$path + '/index.php/api/industryList', data).then((response)=>{
            // console.log(response);
              if(response.code == 200){
                that.industryList = response.data;    //修改一下，传企业，目前是行业的接口
              }else{

              }

          })
        },
        /**
         * 模糊查询企业
         */
        marchCompany: function(e){
            // var that = this;
            // var keyWords = e.target.value;
            // if (keyWords == that.companyDetails.name) {
            //   $('#trade')[0].disabled = true;
            // }
            // var data = {
            //     access_token: this.access_token,
            //     keyWords: keyWords
            // }
            // this.$post(this.$path + '/index.php/api/matchCompany', data).then((response)=>{
            //     console.log(response);
            //       if(response.code == 200){
            //         that.companyList = response.data;
            //       }else{
            //         that.companyList = [];
            //       }

            //   })
        },
      //编辑个人信息后保存
      gotobtn() {
        console.log('编辑个人信息后保存')
          // if (this.userInfo.company_name.trim() == '') {
          //   this.$openTips({
          //       text: '公司名不能为空',
          //       time: 2000
          //   }) 
          //   return false;
          // }
          // //公司名
          // if (this.trade.trim() == '') {
          //   this.$openTips({
          //       text: '行业不能为空',
          //       time: 2000
          //   }) 
          //   return false;
          // }
          // //名片名
          // if (this.userInfo.username.trim() == '') {
          //   this.$openTips({
          //       text: '名片名不能为空',
          //       time: 2000
          //   }) 
          //   return false;
          // }
          // // 手机
          // if(!(/^1[34578]\d{9}$/.test(this.userInfo.mobile))){ 
          //   this.$openTips({
          //       text: '手机格式错误，请重新填写',
          //       time: 2000
          //   }) 
          //   return false; 
          // } 
          // // 邮箱
          // if(this.userInfo.usermail.trim() == '') {
          //   this.$openTips({
          //       text: '邮箱不能为空',
          //       time: 2000
          //   }) 
          //   return false;
          // }
          // if(!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.userInfo.usermail))){ 
          //   this.$openTips({
          //       text: '邮箱格式错误，请重新填写',
          //       time: 2000
          //   })
          //   return false; 
          // }
          // //职位
          // if (this.userInfo.admin_job.trim() == '') {
          //   this.$openTips({
          //       text: '工作职位不能为空',
          //       time: 2000
          //   }) 
          //   return false;
          // }
          //  
          var that = this;
          this.$post(this.$path + '/index.php/api/users/UpdateUser',that.form_data).then((response)=>{
              if(response.code == 200){ 
                    that.userInfo = window.localStorage.getItem('userInfo');
                    that.userInfo = JSON.parse(that.userInfo);
                    that.userInfo.username     = response.data.username;    //用户名
                    that.userInfo.userhead     = response.data.userhead;    //头像
                    that.userInfo.company      = response.data.company;      //默认公司id 
                    that.userInfo.company_id   = response.data.company;   
                    that.userInfo.admin_job    = response.data.admin_job;    
                    that.userInfo.company_name = response.data.company_name;    //公司名称
                    that.userInfo.industry     = response.data.industry;        //展示的行业
                    that.userInfo.position     = response.data.position;        //展示的位置
                    that.userInfo.showmobile   = response.data.showmobile;      //展示的手机 
                    that.userInfo.showusermail = response.data.showusermail;    //展示的邮箱
                    that.userInfo.showaddress  = response.data.showaddress;     //展示的地址



                    let userInfo = JSON.stringify(that.userInfo);
                    window.localStorage.setItem('userInfo',userInfo);
                    that.$openDialog({
                          src: require('../common/images/UI-11.png'),
                          title: '提交完成',
                          message: '编辑成功',
                          okText: '完成',
                          callback (flag) {
                              if(flag) {
                                  that.$router.replace({ path: '/userCenter'})
                              }     
                          }
                      }); 
                    // that.$router.replace({path:'/userCenter'});
                }else{
                  that.$openDialog({
                      src: require('../common/images/UI-08.png'),
                      title: '编辑失败',
                      message: response.msg,
                      okText: '确定'
                  });
                  // this.$openTips({
                  //   text: '编辑失败',
                  //   time: 2000
                  // }) 
                }
          }) 

      },
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2(ev) {
        var _this = this;
        // var params = JSON.stringify(this.ruleForm2);
        // this.loading = true;
        // Indicator.open({
        //   text: '加载中...',
        //   spinnerType: 'snake'
        // });
              // this.$router.push({path:'/'});
        // 
        // console.log(qs.stringify(this.ruleForm2));
        // console.log(this.ruleForm2)
        // loadinginstace =  Indicator.open({text: '加载中...',spinnerType: 'snake'});
        axios.post(_this.$path+'/api.php/api/Login',qs.stringify(this.ruleForm2)).then((response) => {
               if(response){ 
                  // Indicator.close();
                  // console.log(response);

                 if(response.data.code ==200){ 
                  	console.log(response);
                      window.localStorage.setItem('access_token',response.data.data.access_token);

                     MessageBox('提示',response.data.msg).then(action =>{
                        _this.$router.push({path:'/userCenter'});
                      });

                  }else{ 
                    MessageBox('提示',response.data.msg);
                  }
               }
             
        })


      },
      //完成
      // carryout:function(){
      //   this.$router.push({path:'/userCenter'});
      // },
      outlogin:function(){
        localStorage.removeItem('access_token');
        this.$router.push({path:'/'});
      },

      //阻止输入法的唤醒
      showPicker(e){
        e.preventDefault(); //阻止输入法的唤醒
      },

      //点击返回个人中心
      // gotoback() {
      //   this.$router.push({path:'/userCenter'});
      // }
  //     actionSheet: function(){
  //         // 打开action sheet
  //         this.sheetVisible = true;
  //     },
  //     getCamera: function(){
  //       console.log("打开相机")
  //     },
  //     getLibrary: function(){
  //       console.log("打开相册")
  //     },
      

      // 头像begin
      // handleAvatarSuccessTwo(res, file) {
      //   this.logImgPath = res.headpath;
      //   this.userInfo.userhead = URL.createObjectURL(file.raw);
      //   console.log(this.logImgPath);
      // },
      // beforeAvatarUploadTwo(file) {
      //   const isJPG = file.type === 'image/jpeg';
      //   const isPNG = file.type === 'image/png';
      //   const isLt2M = file.size / 1024 / 1024 < 2;

      //   if (!isJPG && !isPNG) {
      //     this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      //     return false;
      //   }
      //   if (!isLt2M) {
      //     this.$message.error('上传头像图片大小不能超过 2MB!');
      //     return false;
      //   }
      // },


    }
  }

</script>
<style>
@import '../common/css/userCenter.css';

/* 个人头像 */
.main-people-img {
  height: 1rem;
  line-height: 1rem;
}
.main-people-img h3{
  font-size: 0.28rem;
  color: #333;
  font-weight: 500;
}
.main-nav-menu label {
  width: 100%;
  line-height: 1rem;
}
.main-nav-menu input {
  line-height: 0.9rem;
  width: 78%;
}
.main-nav-menu .main_menu:last-child {
  border-bottom: 1px solid #d8d8d8;
}

/* 卡片底部 */
.visitors_bottom {
  border-top: 1px solid #f3f3f3;
  padding-top: 0.2rem;
}
.visitors_bottom ul>li{
  width: 50%;
}
.match{
    width: 100%;
    position: fixed;
    background-color: #ccc;
    top: 3.9rem;
    text-align: left;
}
.match li{
    color: #333;
    font-size: 0.4rem;
    padding: 0.2rem 0 0.2rem 0.4rem;
}
.create_person{
    width: 7.1rem;
    height: 1.09rem;
    margin: 2.9rem auto 0 auto;
    font-size: 0.32rem;
    color: #fff;
    background-color: transparent;
    border-radius: 0.08rem;
    line-height: 1.09rem;
}
#company_trade{
    position: relative;
    top: 0;
    left: 0;
    height: 0.9rem;
    line-height: 0.9rem;
    border: none;
    outline: none;
    width: 78%;
    font-size: 0.26rem;
    color: #666;
    background-color: transparent;
}



</style>
